/**
 * @author 木人心
 * @version 1.0.0
  文件用于存储全局的颜色变量，在vite中全局引入到每一个vue的style中，可以直接使用本文件中的变量。
  文件中不能存在非变量的内容，如.test{}这种会编译出结果的代码。因为这些内容会频繁出现在vue的style中，
  导致每一个页面都有相同的样式
 */
@use 'sass:math';
@use 'sass:map';
@use "../../../assets/styles/theme/color" as theme;

// 取出变量，供全局使用
$colors: theme.$colors !default;
$text-color: theme.$text-color !default;
$border-color: theme.$border-color !default;

$color-primary: map.get($colors, 'primary', 'base');
$color-success: map.get($colors, 'success', 'base');
$color-warning: map.get($colors, 'warning', 'base');
$color-danger: map.get($colors, 'danger', 'base');
$color-error: map.get($colors, 'error', 'base');
$color-info: map.get($colors, 'info', 'base');

// 创建mix和rgba的两种mixin，用于生成更多的颜色
@mixin set-color-mix-level($type,$number,$mode: 'light',$mix-color: #FFFFF) {
  // 使用deep-merge向$colors.$type中添加新的属性
  $colors: map.deep-merge(
    (
      $type: (
        '#{$mode}-#{$number}':
        mix(
          $mix-color,
          map.get($colors, $type, 'base'),
          math.percentage(math.div($number, 10))
        ),
      ),
    ),
    $colors
  ) !global;
}

@mixin set-color-rgba-level($type, $number) {
  // 使用deep-merge向$colors.$type中添加新的属性
  $colors: map.deep-merge(
    (
      $type: (
        'alpha-#{$number}':
        rgba(
          map.get($colors, $type, 'base'),
          math.percentage(math.div($number, 10))
        )
      ),
    ),
    $colors
  ) !global;
}

$percentage: (1, 3, 5, 7, 8, 9);

@each $type, $val in $colors {
  @if type-of($val) == 'map' {
    @each $i in $percentage {
      @include set-color-mix-level($type, $i, 'light', #FFFFFF);
    }
    @each $i in $percentage {
      @include set-color-rgba-level($type, $i);
    }
    @include set-color-mix-level($type, 2, 'dark', #000000);
  }
}

// flex快速布局
@mixin d-flex($align-items, $justify-content: null) {
  display: flex;
  align-items: $align-items;
  @if $justify-content == null {
    justify-content: $align-items;
  } @else {
    justify-content: $justify-content;
  }
}
